import * as echarts from 'echarts'
var data1 = [50, 45, 40, 35, 30];
var data2 = [32, 33, 26, 13, 21];
var data3 = [50, 45, 40, 35, 30];;
var data4 = [32, 33, 26, 13, 21];
var datacity = ['小麦', '水稻', '玉米', '高粱', '大豆'];
export const leftTopChart1 = {
    backgroundColor: 'transparent',
    // 指定图表的配置项和数据
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    grid: { //图表的位置
        top: '10%',
        left: '-10%',
        right: '-5%',
        bottom: '15%',
        containLabel: true
    },
    legend: {
        bottom: 0,
        right: 0,
        data: ['新生平均长度', '老旧作物平均长度'],
        icon: 'circle'
    },
    yAxis: [{
        type: 'value',
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} '
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        },
        show: false

    }],
    xAxis: [{
        type: 'category',
        axisLabel: {
            show: true,
            splitNumber: 0,
            textStyle: {
                fontSize: 10,
                color: '#fff'
            },
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        data: datacity,
    }],
    series: [{
        name: '新生平均长度',
        type: 'line',
        smooth: true,
        barWidth: '12px',
        data: data1,
        itemStyle: {
            color: "#5a65aa"
        },
        areaStyle:{
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "#5a65aaaa"
            },
            {
                offset: 1,
                color: "transparent"
            }
            ], false),
            shadowColor: '#5a65aaaa', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        label: {
            show: true,
            position: 'top',
            formatter: "{d|{c}}",
            rich: {
                d: {
                    fontSize: 12,
                    color: '#fff',
                    fontWeight: 600
                }
            }
        }

    },
    {
        name: '老旧作物平均长度',
        type: 'line',
        smooth: true,
        color: '#F6931C',
        barWidth: '12px',
        data: data2,
        itemStyle: {
            normal: {
                color: "#f3f95d"
            }
        },
        areaStyle:{
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(243, 249, 93,0.5)"
            },
            {
                offset: 1,
                color: "transparent"
            }
            ], false),
            shadowColor: 'rgba(243, 249, 93,0.5)', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }


    },

    ]
};
var value = [5, 8, 12, 14, 16, 18, 20, 22, 24, 26, 30];
export const leftTopChart2 = {
    backgroundColor: 'transparent',
    title: {
        show: false,
        text: '庄稼生长',
        x: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    grid: { //图表的位置
        top: '10%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    dataRange: {
        show: false,
        min: 0,
        max: 12,
        calculable: true,
        color: ['#d94e5d', '#eac736', '#50a3ba'],
        y: 'center',
    },

    xAxis: [
        {
            type: 'category',
            show: false,
            data: ['小麦', '水稻', '玉米', '大豆', '高粱', '红豆', '新笋', '胡萝不', '西瓜', '藤瓜', '葡萄']
        }
    ],
    yAxis: [
        {
            type: 'value',
            show: false
        }
    ],
    series: [
        {
            name: '个',
            type: 'bar',
            barGap: 0.1,
            barCategoryGap: 0.01,
            itemStyle: {
                normal: {
                    color: function (params) {
                        // build a color map as your need.
                        var colorList = [
                            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}',
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        }
                    },
                    shadowBlur: 80,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: value.map(function (a, idx) {
                return [idx, a + 30, idx];
            })
        }
    ]
}
const center1 = [50, 45, 40, 35, 30]
const center2 = [32, 33, 26, 13, 21];
let goToSchool = ["40", "60", "22", "85", "50", "40"]
let goOutSchool = ["20", "50", "12", "65", "30", "60"]

export const centerBottomChart1 = {
    backgroundColor: 'transparent',
    // 指定图表的配置项和数据
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    legend: {
        bottom: 10,
        right: '20%',
        data: ['实际生长速率', '上一年生长速率'],
        icon: 'circle'
    },
    grid: { //图表的位置
        top: '5%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    yAxis: [{
        type: 'value',
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} '
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        },
        show: true

    }],
    xAxis: [{
        type: 'category',
        axisLabel: {
            show: true,
            splitNumber: 0,
            textStyle: {
                fontSize: 10,
                color: '#fff'
            },
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        data: datacity,
    }],
    series: [{
        name: '新生速率',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: "#5a65aa", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
        },
        itemStyle: {
            color: "rgba(25,163,223,1)",
            borderColor: "#646ace",
            borderWidth: 2

        },
        tooltip: {
            show: true
        },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#5a65aa"


                },
                {
                    offset: 1,
                    color: "transparent"
                }
                ], false),
                shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
        data: goToSchool
    }, {
        name: '原生速率',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: "#21dbd5", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
        },
        itemStyle: {
            color: "#21dbd5",
            borderColor: "#646ace",
            borderWidth: 2

        },
        tooltip: {
            show: true
        },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#21dbd5"
                },
                {
                    offset: 1,
                    color: "transparent"
                }
                ], false),
                shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
        data: goOutSchool
    }]
};
export const centerBottomChart2 = {
    backgroundColor: 'transparent',
    "grid": {
        "top": "15%",
        "left": "15%",
        "bottom": "10%",
        "right": "10%",
        "containLabel": true
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    "xAxis": [{
        "type": "category",
        "data": ["累计", "当月"],
        "axisTick": {
            "alignWithLabel": true
        },
        "nameTextStyle": {
            "color": "#82b0ec"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#82b0ec"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#82b0ec"
            }
        }
    }],
    "yAxis": [{
        "type": "value",
        "axisLabel": {
            "textStyle": {
                "color": "#82b0ec"
            },
            "formatter": "{value}%"
        },
        "splitLine": {
            "lineStyle": {
                "color": "#0c2c5a"
            }
        },
        "axisLine": {
            "show": false
        }
    }],
    "series": [{
        "name": "",
        type: 'pictorialBar',
        symbolSize: [60, 16],
        symbolOffset: [0, -10],
        symbolPosition: 'end',
        z: 12,
        //"barWidth": "20",
        "label": {
            "normal": {
                "show": true,
                "position": "top",
                "formatter": "{c}%"
            }
        },
        "data": [{
            "value": 100,
            "itemStyle": {
                "color": "#59cb42"
            }
        }, {
            "value": 55.9,
            "itemStyle": {
                "color": "#3cefff"
            }
        }]
    },
    {
        name: '',
        type: 'pictorialBar',
        symbolSize: [60, 16],
        symbolOffset: [0, 10],
        // "barWidth": "20",
        z: 12,
        "data": [{
            "value": 100,
            "itemStyle": {
                "color": "#59cb42"
            }
        }, {
            "value": 55.559999999999995,
            "itemStyle": {
                "color": "#3cefff"
            }
        }]
    },
    {
        name: '',
        type: 'pictorialBar',
        symbolSize: [90, 30],
        symbolOffset: [0, 20],
        z: 10,
        itemStyle: {
            normal: {
                color: 'transparent',
                borderColor: '#14b1eb',
                borderType: 'dashed',
                borderWidth: 5
            }
        },
        data: [100, 55.559999999999995]
    },
    {
        type: 'bar',
        itemStyle: {
            normal: {
                //color: '#14b1eb',
                opacity: .7
            }
        },
        //silent: true,
        "barWidth": "60",
        //barGap: '-100%', // Make series be overlap
        "data": [{
            "value": 100,
            "itemStyle": {
                "color": "#59cb42"
            }
        }, {
            "value": 55.559999999999995,
            "itemStyle": {
                "color": "#3cefff"
            }
        }],
        markLine: {
            symbol: 'none',
            label: {
                position: "middle",
                formatter: '{b}'
            },
            data: [{
                name: "目标值",
                yAxis: 80,//res.targetTwo,
                lineStyle: {
                    color: "#eecb5f"
                },
            }]
        }

    }


    ]
}
var left = [];
for (let i = 0; i < 5; ++i) {
    left.push(Math.round(Math.random() * 10));
}
var xData2 = ["News", "Weixin", "Weibo", "Tieba", "BBS", "Blog"];
var left1 = [200, 100, 200, 200, 100, 123];
var left2 = [300, 200, 300, 300, 400, 143];
export const leftBottomChart = {
    backgroundColor: 'transparent',
    tooltip: {
        trigger: 'item',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    grid: {
        top: '10%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        data: xData2,
        show: true,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                type: 'solid',
                color: 'gray',
                opacity: 1
            }
        },
        // lineStyle: {
        //     show: true,
        //     type: 'solid'
        // },
        axisLabel: {
            interval: 0,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
            margin: 20, //刻度标签与轴线之间的距离。
        },

    },
    yAxis: {
        show: true,
        nameTextStyle: {
            color: 'white',
            fontSize: 12,
            align: 'right',
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                opacity: 0.5
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
        }
    },
    series: [{ //三个最低下的圆片
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [45, 25],
        "symbolOffset": [0, 10],
        "z": 12,
        itemStyle: {
            opacity: 1,
            color: function (params) {
                var a = params.name.slice(0, 2);
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#12B9DB' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#6F8EF2' // 100% 处的颜色
                }], false)
            }
        },
        "data": [0.5, 0.5, 0.5, 0.5, 0.5, 0.5]
    },


    //下半截柱状图
    {
        name: '2020',
        type: 'bar',
        barWidth: 45,
        barGap: '-100%',
        itemStyle: { //lenged文本
            opacity: .7,
            color: function (params) {
                var a = params.name.slice(0, 2);

                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#12B9DB' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#6F8EF2' // 100% 处的颜色
                }], false)

            }
        },

        data: left1
    },

    { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
        type: 'bar',
        barWidth: 45,
        barGap: '-100%',
        stack: '广告',
        itemStyle: {
            color: 'transparent'
        },
        data: data1
    },

    {
        "name": "", //头部
        "type": "pictorialBar",
        "symbolSize": [45, 25],
        "symbolOffset": [0, -10],
        "z": 12,
        "symbolPosition": "end",
        itemStyle: {
            color: '#163F7A',
            opacity: 1,
        },
        "data": left2
    },

    {
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [45, 25],
        "symbolOffset": [0, -10],
        "z": 12,
        itemStyle: {
            opacity: 1,
            color: function (params) {
                var a = params.name.slice(0, 2);

                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#12B9DB' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#6F8EF2' // 100% 处的颜色
                }], false)

            }
        },
        "symbolPosition": "end",
        "data": left1
    },

    {
        name: '2019',
        type: 'bar',
        barWidth: 45,
        barGap: '-100%',
        z: 0,
        itemStyle: {
            color: '#163F7A',
            opacity: .7,
        },

        data: left2
    }


    ]
}